import React from 'react'
import Taro from '@tarojs/taro'
import {Image, View, Text, Swiper, SwiperItem} from '@tarojs/components'
import './index.scss'

export default function MemberCenter() {
  let capsule = {}
  if(process.env.TARO_ENV === 'weapp') capsule = Taro.getMenuButtonBoundingClientRect()
  return (
    <View className='member-center'>
      <View className='vip-nav-bar' style={{paddingTop:capsule.top+'PX'}}>上影VIP会员中心</View>
      <View className="vip-header">
        <View className="header-box">
          <Image className='box-img' mode='aspectFill' src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'></Image>
          <View className="header-info">
            <View className="h2">韩骁龙</View>
            <Text>(188****9028)</Text>
          </View>
          <View className="header-time">
            2025-06-18到期
            <View className="time-button">立即续费</View>
          </View>
        </View>
      </View>

      <View className="vip-main">
        <View className="main-box">
        <Swiper circular className='main-swiper'>
          <SwiperItem>
            <View className="main-list">
              <View className="list-item">
                <Image src={require('@/images/vip/vip.svg')} className="item-icon"></Image>
                <View className='p'>会员价</View>
              </View>
              <View className="list-item">
                <Image src={require('@/images/vip/cola.svg')} className="item-icon"></Image>
                <View className='p'>可乐畅饮</View>
              </View>
              <View className="list-item">
                <Image src={require('@/images/vip/birthday.svg')} className="item-icon"></Image>
                <View className='p'>生日特权</View>
              </View>
              <View className="list-item">
                <Image src={require('@/images/vip/select.svg')} className="item-icon"></Image>
                <View className='p'>优选座位</View>
              </View>
              <View className="list-item">
                <Image src={require('@/images/vip/posi.svg')} className="item-icon"></Image>
                <View className='p'>会员日惊喜</View>
              </View>
              <View className="list-item">
                <Image src={require('@/images/vip/face.svg')} className="item-icon"></Image>
                <View className='p'>明星见面会</View>
              </View>
              <View className="list-item">
                <Image src={require('@/images/vip/watch.svg')} className="item-icon"></Image>
                <View className='p'>超前观影</View>
              </View>
              <View className="list-item">
                <Image src={require('@/images/vip/music.svg')} className="item-icon"></Image>
                <View className='p'>影视周边</View>
              </View>
              <View className="list-item">
                <Image src={require('@/images/vip/talk.svg')} className="item-icon"></Image>
                <View className='p'>异业特权</View>
              </View>
              <View className="list-item">
                <Image src={require('@/images/vip/tui.svg')} className="item-icon"></Image>
                <View className='p'>退改签</View>
              </View>
            </View>
          </SwiperItem>
        </Swiper>
        </View>
        <View className="main-banner">
          <Image src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' style={{height:'80px'}} className='banner-img' mode='aspectFill'></Image>
        </View>
        <View className="main-banner">
          <Image src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' style={{height:'267px'}} className='banner-img' mode='aspectFill'></Image>
        </View>

        <View className="main-integral">
          <View className="integral-title">
            <View className="h2">积分当钱花</View>
            <View className="h2-span">查看更多 <Text className='at-icon at-icon-chevron-right'></Text></View>
          </View>
          <View className="integral-goods">
            <View className="goods-item">
              <Image className='item-img' mode='aspectFill' src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' />
              <View className="h2 dot">兰蔻全新精华</View>
              <View className="item-span"><Text className='left'>SFC VIP</Text> <Text className='right'>省100积分</Text></View>
              <View className="item-price">1499积分 +4.9元</View>
            </View>
          </View>
        </View>
        <View className="main-banner">
          <Image src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' style={{height:'80px'}} className='banner-img' mode='aspectFill'></Image>
        </View>
        
        <View className="main-recommend">
          <View className="title">SFC VIP 精选推荐</View>
          <View className="recommend-list">
            <View className="list-item">
              <Image src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' className='item-img' mode='aspectFill' />
              <View style={{padding:'10px 8px'}}>
              <View className="item-h2 dot2">美影正版 阿凡提的故事 阿凡提和毛驴Q版手办...</View>
              <View className="item-info">
                <View className="info-price"><Text style={{fontSize:12}}>￥</Text>25.90</View>
                <View className="info-span">已售 200 件</View>
              </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
  )
}
